import React from "react"

const MyEssay = () => {
    const navigate = React.$Router.useNavigate()

    const [list, setList] = React.useState([]);

    const [finished, setFinished] = React.useState(false);

    const [loading, setLoading] = React.useState(false)

    const LoginAuth = React.$Cookies.load('LoginAuth') ? React.$Cookies.load('LoginAuth') : {}

    let cateData = React.useRef([])

    const page = React.useRef(1)

    const load = () => {
        getCateData()
        setLoading(true)
    }

    const refresh = () => {

        return new Promise((resolve) => {
            setTimeout(() => {
                setList([])
                page.current = 1
                cateData.current = []
                resolve(true)
                setFinished(false)
            }, 1000)
        })
    }

    const getCateData = async () => {
        setFinished(true)

        let data = {
            'busid': LoginAuth.id,
            'page': page.current
        }

        let result = await React.$Api.MyEssayData(data);

        if (result.code === 1) {
            cateData.current = cateData.current.concat(result.data);

            setList(cateData.current)

            page.current = page.current + 1

            setFinished(false)
        } else {
            setFinished(true)
            return false
        }
    }

    const Items = () => {
        return list.map((item, index) => {
            return (
                <li key={index}>
                    <React.$Router.NavLink to={"/essay/essay/info?id=" + item.category.id}>
                        <img src={item.category.image_cdn} alt="" />
                        <p>{item.category.name}</p>
                        <span>{item.category.createtime_text}</span>
                    </React.$Router.NavLink>
                </li>
            )
        })
    }

    return (
        <>
            <React.$Vant.NavBar
                title="收藏文章"
                leftText="返回"
                onClickLeft={() => { navigate(-1) }}
            />

            {/* 文章列表 */}
            <React.$Vant.PullRefresh
                onRefresh={refresh}
            >
                <React.$Vant.List className="catelist" finished={finished} onLoad={load} offset={5} loading={loading} autoCheck={false}>
                    <div className='lest_xs'>
                        <ul>
                            <Items />
                        </ul>
                    </div>
                </React.$Vant.List>
            </React.$Vant.PullRefresh>
        </>
    )
}

export default MyEssay